<template>
  <div class="patient">
    <div class="card">
      <div class="align-items_center">
        <van-image
          class="avatar mr_sm"
          round
          width="3rem"
          height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />

        <div class="flex">
          <div class="justify_between align-items_center">
            <p class="name">简一</p>
          </div>
          <div class="justify_between align-items_center">
            <p class="card-num">620423198812121212</p>
          </div>
        </div>
        <div></div>
      </div>
      <hr class="mt_sm" />
      <div class="align-items_center justify_between mt_sm">
        <span class="card-num">24岁</span>
        <span class="card-num">男</span>
        <span class="card-num">藏族</span>
      </div>
    </div>

    <div class="card mt_xs">
      <p class="card-num">
        <span class="label">归属地区：</span><span>年龙乡</span>
      </p>
      <div class="card-num mt_xs justify_between align-items_center">
        <p><span class="label">筛查次数：</span><span>1次</span></p>
      </div>
      <p class="card-num mt_xs">
        <span class="label">人群分类：</span><span>非重点人群</span>
      </p>

      <div class="card-num mt_xs justify_between align-items_center">
        <p><span class="label">筛查日期：</span><span>2023-11-14</span></p>

        <div class="align-items_center">
          <van-button
            plain
            class="btn_small"
            type="primary"
            size="mini"
            round
            @click="isShow = true"
            >采集心电图</van-button
          >
        </div>
      </div>
      <p class="card-num mt_xs">
        <span class="label">筛查单位：</span><span>色达县年龙乡信息采集组</span>
      </p>
    </div>

    <div class="patient-footer mt_sm">
      <van-button
        block
        size="small"
        class="btn px_sm"
        @click="navigate('/modules/ECG/src/symptom_editor')"
      >
        新增筛查
      </van-button>
    </div>
  </div>

  <van-dialog
    class="dialog"
    v-model:show="isShow"
    title="心电图采集"
    :show-cancel-button="true"
  >
    <van-form class="form">
      <van-field name="uploader">
        <template #input>
          <van-uploader max-count="1" />
        </template>
      </van-field>

      <!-- <div class="form-button-group">
        <van-button block size="small" @click="isShow = false">
          取消
        </van-button>
        <van-button
          block
          size="small"
          type="primary"
          native-type="submit"
          @click="isShow = false"
        >
          保存
        </van-button>
      </div> -->
    </van-form>
  </van-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { navigate } from '@/service/navigate';

export default defineComponent({
  setup() {
    const isShow = ref(false);

    return {
      navigate,
      isShow,
    };
  },
});
</script>

